<template>
	<view class="house">
		<!-- 顶部搜索框 -->
		<view class="nav">
			<view class="">logo</view>
			<view class="search">
				<view class="search-t" @click="show = true">
					<!-- 点击城市进行切换 -->
					<picker mode="selector" :range="columns" @change="cityChange" :value="index">
						<view>{{ columns[index] }}</view>
					</picker>
				</view>

				<view class="flex1 inp-wrap">
					<view class="iconfont icon-sousuo search-icon"></view>
					<input type="text" placeholder="房东直租" class="flex1" v-model="searchVal" confirm-type="search" @confirm="searchBtn" />
				</view>
			</view>
		</view>
		<!-- 功能区 -->
		<view class="fun-wrap flex1">
			<template v-for="(item, index) in functionalDomain" :key="index">
				<view class="fun-box" @click="funBtn(index)">
					<view :class="['iconfont', item.icon, 'fun-box-icon']"></view>
					<view class="">{{ item.title }}</view>
				</view>
			</template>
		</view>
		<!-- 功能区的打赏弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="popup-wrap">
				<image src="../../static/logo.png" mode="aspectFit" show-menu-by-longpress></image>
				<view class="">长按图中的二维码进行识别打赏</view>
			</view>
		</uni-popup>

		<template v-if="!noList">
			<!-- 今日精选 -->
			<view class="tody">今日精选</view>
			<view class="list-wrap">
				<template v-for="(item, index) in list" :key="'k' + index">
					<view class="list-box" @click="goDetail(item)">
						<view class="box-top">
							<swiper :indicator-dots="true" :autoplay="false" style="height: 100%" indicator-active-color="#fff" indicator-color="#ccc">
								<template v-for="(val, k) in item.imgs" :key="'j' + k">
									<swiper-item>
										<image :src="val" mode="aspectFill" class="img"></image>
									</swiper-item>
								</template>
							</swiper>
						</view>
						<view class="bg">
							<view class="box-c">
								<view class="over-hidden flex1">
									{{ item.title }}
								</view>
								<view class="">￥{{ item.price }}</view>
							</view>
							<view class="c">{{ item.dos }}</view>
						</view>
					</view>
				</template>
				<view class="no-more" v-if="list.length>1">
					{{ nomore ? '当前没有房源了哟~' : '上拉加载更多房源' }}
				</view>
			</view>
		</template>
		<template v-else>
			<view class="no-list">
				<view class="">当前还没有房源奥~</view>
				<view class="">可以先去发布一个</view>
			</view>
		</template>
	</view>
</template>

<script>
import { onReachBottom } from '@dcloudio/uni-app';
import HousePage from './index.js';
import { onMounted, reactive, ref, toRefs } from 'vue';
export default {
	setup() {
		const popup = ref(null);
		const data = reactive({
			show: false, //城市切换的弹框，默认不展示
			columns: ['北京', '杭州', '苏州', '广州'], // 城市弹框内容
			index: 0, //默认当前为北京
			searchVal: '', //搜索框的值
			functionalDomain: [
				{ title: '地铁找房', icon: 'icon-ditiezhaofang-01' },
				{ title: '合同避坑', icon: 'icon-hetongwenshu' },
				{ title: '租房群', icon: 'icon-liwuhuodong' },
				{ title: '我的收藏', icon: 'icon-shoucang1' },
				{ title: '打赏', icon: 'icon-shang' },
				{ title: '我的发布', icon: 'icon-fabu' }
			],
			list: [],
			nomore: false,
			noList: false,
			page:1,
			size:10
		});
		HousePage.init(data)
		//选择城市列表
		const cityChange = (e) => HousePage.cityChange(data, e);
		//搜索框中点击搜索进行调用查询接口
		const searchBtn = () => {};
		//上拉加载的事件
		onReachBottom(() => {
			console.log('上拉加载');
			if(data.nomore) return
			data.page++
			HousePage.init(data,true)
		});
		//点击跳转到详情页面
		const goDetail = (val) => HousePage.goDetail(val);
		// 功能区的点击事件
		const funBtn = (k) => HousePage.funBtn(k, popup);
		return {
			...toRefs(data),
			cityChange,
			searchBtn,
			funBtn,
			popup,
			goDetail
		};
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}

.house {
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
	.nav {
		height: 200upx;
		box-sizing: border-box;
		padding: 20upx 0;
		text-align: center;
		background-color: #ff7e78;
		position: relative;
		.search {
			position: absolute;
			left: 50%;
			transform: translate(-50%);
			bottom: -30upx;
			@include flex(false);
			width: 80%;
			height: 80upx;
			box-sizing: border-box;
			padding: 0 20upx;
			border-radius: 20upx;
			background-color: #fff;
			box-shadow: 0 10upx 10upx #eee;
			&-t {
				padding-right: 20upx;
				border-right: 2upx solid #eee;
			}
			&-icon {
				font-size: 40upx;
				color: #ee504c;
				padding-right: 20upx;
			}
			.inp-wrap {
				@include flex(false);
				padding: 0 20px;
				text-align: left;
			}
		}
	}
	.fun-wrap {
		@include flex(false);
		font-size: 26upx;
		padding: 80upx 20upx 40upx;
		border-bottom: 2upx solid #eee;
		background-color: #fff;
		.fun-box {
			width: 33%;
			margin-bottom: 40upx;
			@include flex(true, column, center, center);
			&-icon {
				font-size: 50upx;
				color: #f35148;
				margin-bottom: 10upx;
			}
		}
	}
	.popup-wrap {
		margin: 0 auto;
		padding: 60upx;
		border-radius: 20upx;
		background-color: #fff;
		font-size: 30upx;
		& > image {
			display: block;
			width: 380upx;
			height: 380upx;
			margin: 20upx auto;
		}
	}
	.no-list {
		text-align: center;
		font-size: 30upx;
		color: #ccc;
		margin: 150upx 0;
	}
	.tody {
		text-align: center;
		padding: 30upx 0;
		font-size: 36upx;
		font-weight: bold;
		background-color: #f2f2f2;
	}
	.list-wrap {
		padding: 0 20upx;
		background-color: #f2f2f2;
		.list-box {
			width: 100%;
			margin-bottom: 20upx;
			.box-top {
				width: 100%;
				height: 400upx;
				border-radius: 20upx 20upx 0 0;
			}
			.img {
				width: 100%;
				height: 100%;
				border-radius: 20upx 20upx 0 0;
			}
			.bg {
				background-color: #fff;
				border-radius: 0 0 20upx 20upx;
				padding: 20upx;
				font-size: 28upx;
			}
			.box-c {
				@include flex(true, row, center, space-between);
			}
			.c {
				color: #ccc;
			}
		}
	}
	.no-more {
		text-align: center;
		color: #ccc;
		margin: 20upx 0;
	}
}
</style>
